<template>
	<div class="h-[660px] overflow-y-auto flex flex-col w-full">
		<!-- <base-list @request-more="setData" ref="followRequestRef">
			<template #item="{ item }">
			</template>
		</base-list> -->
		<base-list-plus
			auto
			class="flex-1 max-md:px-3 md:px-[35px]"
			:loading="loading"
			:isFinish="isFinish"
			:isEmpty="isEmpty"
			:error="error"
			@load="search"
			@reload="search(true)">
			<div class="grid max-md:grid-cols-1 md:grid-cols-2 gap-4">
				<follow-item v-for="item in list" :key="item.id" :data="item">
					<base-button
						size="tiny"
						:loading="acceptLoading"
						:block="false"
						type="primary"
						class="ml-2"
						@click="accept(item)">
						{{ $t('action.agree') }}
					</base-button>
					<base-button
						:loading="rejectLoading"
						size="tiny"
						:block="false"
						class="ml-2"
						@click="reject(item)">
						{{ $t('action.reject') }}
					</base-button>
				</follow-item>
			</div>
		</base-list-plus>
	</div>
</template>
<script lang="ts" setup>
//  computed,useProfileStore
import { watch } from 'vue'
import { BaseListPlus, BaseButton } from '@/components/base'
import { useFollowStore } from '@/store'
import FollowItem from './follow-item.vue'
import { getFollowApplyList, followAccept, followReject } from '@/api/user'
import { useRequest } from '@/hooks'

// const profileStore = useProfileStore()
const followStore = useFollowStore()

// const isMe = computed(() => profileStore.isMe(followStore.followShow?.userId))

watch(
	() => followStore.followShow?.userId,
	(val: any, oldVal: any) => {
		if (oldVal && val !== oldVal) {
			console.log(oldVal, val)
			search(true)
		}
	}
)

const { run, loading, error, list, isFinish, isEmpty } = useRequest<any>(getFollowApplyList, {
	pageSize: 20,
	paramsAlias: { page: 'pageNum' },
	resultAlias: { list: 'rows' }
})

const { run: runAccept, loading: acceptLoading } = useRequest<any>(followAccept, {
	showSuccess: true,
	showError: true,
	onSuccess: () => {
		search(true)
	}
})

const { run: runReject, loading: rejectLoading } = useRequest<any>(followReject, {
	showSuccess: true,
	showError: true,
	onSuccess: () => {
		search(true)
	}
})

const search = (refresh = false) => {
	run(
		// {
		// 	userId: !isMe.value ? followStore.followShow?.userId : undefined
		// },
		undefined,
		{ refresh }
	)
}

const reject = async (item: any) => {
	await runReject({ id: item?.userId })
}

const accept = async (item: any) => {
	await runAccept({ id: item?.userId })
}

search(true)
</script>
